<template>
  <div class="swiper">
    <ul
      class="uu"
      :style="activeStyle"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
    >
      <li v-for="(item, index) in aaa" :key="index">
        <img :src="item.picUrl" alt="">
      </li>
    </ul>
      <ol class="oo">
        <li v-for="(item,index) in aaa.length" :key="index" ref="swipercur" class="cur"></li>
      </ol>
  </div>
</template>

<script>
export default {
  name: "swiper",
  props: {
    aaa:{
        type:Array,
        required: true,
        // default:[],
    },
    height:{
        type:String,
        required:true,
        default:"150px"
    }
  },
  data() {
    return {
      activeStyle: {
        transition: "none",
        left: "-100%",
      },
      tch: 0,
      dir: "left",
      flag: false,
      time:{},
      cur:''
    };
  },
  created() {
    console.log(this.aaa);
    if (this.height != "") {
      this.activeStyle.height = this.height;
    }
      this.fntime()
    
  },
  methods: {
    fntime() {
      this.time = setInterval(()=>{
       this.activeStyle = {
            height: this.height,
            left: "-200% ",
            transition: "left 1s",
          };
         setTimeout(() => {
            // console.log(this.arr);
            let item = this.aaa.shift();
            this.aaa.push(item);
            this.activeStyle = {
              height : this.height,
              left: "-100%",
              transition: "none",
            };
        },1000)
      },3000)
    },
    touchStart(e){
      clearInterval(this.time)
      this.tch = e.touches[0].pageX;
    },
    touchMove(e) {
      if (e.touches[0].pageX - this.tch > 0) {
        this.dir = "right";
      } else {
        this.dir = "left";
      }
    },
    touchEnd() {
      if (!this.flag) {
        this.flag = true;
        if (this.dir == "right") {
          this.activeStyle = {
            height: this.height,
            transition: "left 1s",
            left: "0",
          };
          setTimeout(() => {
            // console.log(this.arr);
            let item = this.aaa.pop();
            this.aaa.unshift(item);
            this.activeStyle = {
              height : this.height,
              transition: "none",
              left: "-100%",
            };
            this.flag = false;
            this.fntime()
          }, 1000);
        } else {
          this.activeStyle = {
            height: this.height,
            left: "-200% ",
            transition: "left 1s",
          };
          setTimeout(() => {
            console.log(this.arr);
            let item = this.aaa.shift();
            this.aaa.push(item);
            this.activeStyle = {
              height : this.height,
              left: "-100%",
              transition: "none",
            };
            this.flag = false;
            this.fntime()
          }, 1000);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  overflow: hidden;
  position: relative;
  .uu {
    width: 400%;
    height: 100%;
    list-style: none;
    // display: flex;
    margin: 0;
    padding: 0;
    position: relative;
    li {
      float: left;
      width: 25%;
      height: 100%;
      line-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
          width: 100%;
          height: 100%;
      }
    }
  }
  .oo{
    width: 100%;
    height: 0.5rem;
    position: absolute;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    li{
      margin: 0 0.15rem;
      width: 0.1rem;
      height: 0.1rem;
      border-radius: 0.2rem;
      background-color: white;
    }
  }
}
</style>
